<template>
  <main-frame :location="location">
    <template slot="mainFrame">
      <el-card style="margin-bottom:20px">
        <div class="demo-input-size">
          <label>
            员工姓名
            <el-input size="mini" placeholder="员工姓名" v-model="empName"></el-input>
          </label>
          <el-button @click="init()" type="primary" size="mini">搜索</el-button>
          <el-button @click="resetFormAndTale()" type="warning" size="mini">刷新</el-button>
        </div>
      </el-card>

      <el-card>
        <el-table v-loading="loading" :data="tableData" border style="width: 100%">
          <el-table-column prop="empName" label="员工姓名" ></el-table-column>
          <el-table-column prop="empPhone" label="员工电话" width="110"></el-table-column>
          <el-table-column prop="1月" label="1月/元" ></el-table-column>
          <el-table-column prop="2月" label="2月/元" ></el-table-column>
          <el-table-column prop="3月" label="3月/元"></el-table-column>
          <el-table-column prop="4月" label="4月/元"></el-table-column>
          <el-table-column prop="5月" label="5月/元"></el-table-column>
          <el-table-column prop="6月" label="6月/元"></el-table-column>
          <el-table-column prop="7月" label="7月/元"></el-table-column>
          <el-table-column prop="8月" label="8月/元"></el-table-column>
          <el-table-column prop="9月" label="9月/元"></el-table-column>
          <el-table-column prop="10月" label="10月/元"></el-table-column>
          <el-table-column prop="11月" label="11月/元"></el-table-column>
          <el-table-column prop="12月" label="12月/元"></el-table-column>
          <el-table-column prop="bonus" label="总提成"></el-table-column>
        </el-table>
      </el-card>
    </template>
  </main-frame>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      loading:true,
      location: "提成/总提成",
      empName: ""
    };
  },
  created() {
      this.init();
  },
  methods: {
    init() {
      this.$get("/emp/bonus", { empName: this.empName }).then(res => {
          if(res.R){
              this.tableData = res.data.users;
          }
        this.loading=false;
      });
    },
    resetFormAndTale(){
        this.loading=true;
        this.empName="";
        this.init();
    }
  }
};
</script>
<style scoped>
</style>

<style scoped>
.demo-input-size .el-input {
  width: 150px !important;
}
.demo-input-size label {
  margin: 0 5px;
}
.demo-input-size {
  color: #606266;
  font-size: 12px;
}
</style>